<template><div class="container">
 <!-- 轮播图 -->
 <el-row>
   <el-col :span="24">
    <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in 6" :key="item">
        <h3>{{ item }}</h3>
        </el-carousel-item>
    </el-carousel>
   </el-col>
 </el-row>
 <!-- 筛选区 -->
 <el-row style="margin-bottom:20px;" v-for="radio in radioGroup">
  <el-col :span="24">
    <el-button 
        v-for="(item, index) in radio.names"
        :type="radio.select===index?'primary':'text'" 
        @click="radio.select=index">
        {{item}}
    </el-button>
  </el-col>
 </el-row>
 <!-- 电影详情弹窗 -->
  <el-dialog 
    :title="selectMovie.title" 
    :visible.sync="dialogVisible"
    :modal-append-to-body="true"
    :lock-scroll="false"
  >
    <div class="pop-content">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="电影封面" name="1">
            <div class="pop-movie poster">
              <img :src="selectMovie.poster" alt="">
            </div>
            <div></div>
          </el-collapse-item>
          <el-collapse-item title="电影信息" name="2">
            <div>
              发布时间：{{ selectMovie.release_time }}
            </div>
            <div>
              译　　名：{{selectMovie.translation}}
            </div>
            <div>
              片　　面：{{selectMovie.name}}
            </div>
            <div>
              年　　代：{{selectMovie.years}}
            </div>
            <div>
              产　　地：{{selectMovie.origin}}
            </div>
            <div>
              类　　别：{{selectMovie.category}}
            </div>
            <div>
              语　　言：{{selectMovie.language}}
            </div>
            <div>
              字　　慕：{{selectMovie.subtitle}}
            </div>
            <div>
              IMDb评分：{{selectMovie.imbd_score}}
            </div>
            <div>
              文件格式：{{selectMovie.file_format}}
            </div>
            <div>
              视频尺寸：{{selectMovie.size}}
            </div>
            <div>
              片　　长：{{selectMovie.long}}
            </div>
          </el-collapse-item>
          <el-collapse-item title="剧情简介" name="3">
            <div>{{selectMovie.abstract}}</div>
          </el-collapse-item>
          <el-collapse-item title="导演及主演信息" name="4">
            <div>导　　演：{{ selectMovie.director }}</div>
            <div>主　　演：{{ selectMovie.stars }}</div>
          </el-collapse-item>
          <el-collapse-item title="下载地址" name="5">
              <el-collapse>
                <el-collapse-item v-for="item in selectMovie.download_address" :title="item.name" name="1">
                  <div v-for="(address, index) in item.address" >
                    <el-input v-model="item.address[index]"></el-input>
                  </div>
                </el-collapse-item>
              </el-collapse>
          </el-collapse-item>
        </el-collapse>
    </div>
  </el-dialog>
 <!-- 电影展示区 -->
 <el-row class="film-list">
  <el-col class="film-warp" :span="6" v-for="i in 4">
    <div
      v-for="(o, index) in data" 
      v-if="(index + 1) % 4 === i || (i===4 && (index + 1) % 4 === 0) "
      class="film-item"
      @click="selectMovie=o;dialogVisible=true"
    >
      <el-popover
      :span="24"
      :key="o" 
      placement="top"
      :title="o.translation + '('+ o.imbd_score +')'"
      width="200"
      trigger="hover"
      :content="o.abstract">
          <el-card slot="reference" :body-style="{ padding: '0px' }">
          <img :src="o.poster" class="image">
          <div class="film-foot">
              <span class="film-name">{{ o.translation }}</span>
              <el-rate
                  v-model="o.half_score===''?0:o.half_score"
                  disabled
                  show-text
                  text-color="#ff9900"
                  text-template="{value}"
                  style="margin-top:10px;"
                  >
              </el-rate>
          </div>
          </el-card>
      </el-popover>
    </div>
  </el-col>
 </el-row>
 <el-row>
    <div class="loading-box" v-loading="loading">
    </div>
 </el-row>
</div></template>

<script>
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}

//文档的总高度
function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}

//浏览器视口的高度
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}

export default {
  name: 'list',
  data () {
    return {
      value5: 9.1,
      currentDate: new Date(),
      loading: true,
      radioGroup: [{
          names: [
              '全部地区',
              '中国大陆',
              '中国香港',
              '中国台湾',
              '美国',
              '日本',
              '韩国',
              '英国',
              '法国',
              '德国',
              '意大利',
              '西班牙',
              '印度',
              '泰国',
              '俄罗斯',
              '伊朗',
              '加拿大',
              '澳大利亚',
              '爱尔兰',
              '瑞典',
              '巴西',
              '丹麦',
              '其他'
          ],
          select: 0
      },
      {
          names: [
              '全部特色',
              '热门',
              '冷门',
              '最新',
              '经典',
              '豆瓣高分'
          ],
          select: 0
      },{
          names: [
              '按时间排序',
              '按热度排序',
              '按评分排序'
          ],
          select: 0
      }],
      pageNum: -1,
      pageSize: 12,
      data: [],
      inLoading: false,
      dialogVisible: false,
      selectMovie: {},
      activeNames: ['5']
    }
  },

  beforeMount() {
    this.loadData();
  },

  mounted() {
      window.addEventListener('scroll',()=>{
      　　if( getScrollTop() + getWindowHeight() == getScrollHeight()) {
            if ( !this.inLoading ) {
              this.inLoading = true;
              this.loadData();
            }
      　　}
      });
  },

  methods: {
    loadData() {
      this.pageNum++;
      this.$http.get(`http://api.tiesec.org/get_new_movies?pageNum=${this.pageNum}&pageSize=${this.pageSize}`)
      .then(response => {
        this.data = this.data.concat(response.body);
        setTimeout(()=>{
          this.inLoading = false;
        },1000);
      }, response => {
        // error callback
      });
    },

    copy(url) {
      console.log(1);
      window.prompt("复制下载地址", url);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  width: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.film-warp {
    padding: 8px;
    box-sizing: border-box;
    cursor: pointer;
}
.film-foot {
    color: #333;
    padding: 10px;
}
.loading-box {
  height: 100px;
  width: 100%;
}
.film-item {
  margin-bottom: 20px;
}

.pop-content {
  max-height:60vh;
  min-height: 60vh;
  width:100%;
  overflow-y:auto;
}

.pop-movie.poster > img{
  max-height: 500px;
}

.address {
  cursor: pointer;
}
</style>
